<template>
  <div>
    <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请输入邮箱' }]"
      />
      <van-field
        v-model="newPassword"
        type="newPassword"
        name="password"
        label="新密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <van-field
        v-model="verify"
        name="verify"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <button class="btnVerify" @touchstart="getVerify">验证码</button>
    <van-row>
      <router-link tag="div" to="/login">
        <van-col span="6">登录</van-col>
      </router-link>
      <router-link tag="div" to="/register">
        <van-col span="6" offset="12">快速注册</van-col>
      </router-link>
    </van-row>
  </div>
</template>
<script>
import qs from 'qs'
export default {
  data() {
    return {
      newPassword: '',
      email: '',
      verify: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async onSubmit(values) {
      const { data: res } = await this.axios.post(
        '/api/users/findPassword',
        qs.stringify(values),
        {
          headers: {
            contentType: 'application/x-www-form-urlencoded'
          }
        }
      )
      if (res.code === 200) {
        this.$dialog
          .confirm({
            title: '标题',
            message: res.msg
          })
          .then(() => {
            // on confirm
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
            this.email = ''
            this.newPassword = ''
          })
      } else {
        this.$dialog
          .confirm({
            title: '标题',
            message: res.msg
          })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    getVerify: async function() {
      var { data: res } = await this.axios.get(
        '/api/users/verify?email=' + this.email
      )
      console.log(res)
      if (res.code === 200) {
        this.$dialog
          .confirm({
            title: '标题',
            message: res.msg
          })
          .then(() => {
            // on confirm
            this.$eouter.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$dialog
          .confirm({
            title: '标题',
            message: res.msg
          })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  }
}
</script>
<style scoped lang="less">
.van-form {
  margin-top: 40%;
  .van-cell {
    font-size: 32px;
  }
}
/deep/ .van-field__label {
  width: 128px;
}
.van-cell {
  line-height: 50px;
}
.van-button {
  height: 80px;
}
.van-col--6 {
  text-align: center;
  color: #fb8a99;
}
.btnVerify {
  position: fixed;
  display: inline-block;
  z-index: 9999;
  right: 20px;
  top: 440px;
}
</style>